<ion-header>

  <ion-navbar>
    <ion-title>Platform</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="platform-demo">

  <p margin class="note">Change devices to see the platform values change.</p>

  <ion-grid>
    <ion-row>
      <ion-col><b>Name</b></ion-col>
      <ion-col><b>Value</b></ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <pre>platform.is('ios')</pre>
      </ion-col>
      <ion-col>
        <pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <pre>platform.is('android')</pre>
      </ion-col>
      <ion-col>
        <pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</pre>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <pre>platform.is('windows')</pre>
      </ion-col>
      <ion-col>
        <pre [ngClass]="isWindows ? 'platform-true' : 'platform-false'">{{isWindows}}</pre>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

<style>
  .platform-demo ion-row ion-col:nth-child(odd) {
    flex: 0 0 62%;
    max-width: 62%;
  }

  .platform-demo ion-row ion-col:nth-child(even) {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .platform-demo pre {
    background: #f8f8f8;
    font-size: 13px;
    min-height: 40px;
    padding: 4px;
    margin-top: 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    white-space: pre-wrap;
  }

  .platform-demo .platform-true {
    background: #dff2bf;
    border-color: #4f8a10;
  }

  .platform-demo .platform-false {
    background: #ffbaba;
    border-color: #d8000c;
  }

  .platform-demo .platform-normal {
    background: #bde5f8;
    border-color: #00529b;
  }

  .platform-demo .note {
    color: #444;
    font-style: italic;
  }
</style>
